<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="购物车" @click-left="$router.push('/home')">
        <template #left>
          <van-icon name="arrow-left" size="25" color='black' />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div class="nothing" v-if="empty">
        <van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="购物车为空" />
      </div>
      <div class="hasthing" v-else>
        <van-swipe-cell v-for="(item, index) in cartList" :key="index" :name="item.cartid" :before-close="beforeClose">
          <!-- beforeClose有三个参数,name -->
          <van-checkbox v-model="item.flag" @click="selectOne(item.cartid, item.flag)"></van-checkbox>
          <van-card :price="item.originprice" :title="item.proname" :thumb="item.img1">
            <template #num>
              <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
                @change="updateNum(item.cartid, item.num)" />
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>

        <van-submit-bar :price="0" button-text="提交订单" @submit="onSubmit">
          <van-checkbox v-model="isAll"></van-checkbox>
          <div class="btn" @click="delsCard">清空购物车</div>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Empty, Card, Stepper, SwipeCell, Checkbox, CheckboxGroup, Dialog, SubmitBar, NavBar, } from 'vant';

Vue.use(Empty);
Vue.use(Card);
Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Dialog);
Vue.use(SubmitBar);
Vue.use(NavBar);

import { doCartList, doUpdateNum, doDeleteOne, doSelectAll, doSelectOne, doRemoveAll, doAddOrder } from "../api/cart";
export default {
  name: 'Cart',
  components: {},
  data() {
    return {
      empty: true,
      // prices: 0,
      cartList: [],

    }
  },
  computed: {
    // getter方法决定了 isAll是全部选中 isAll结果就是true,  有一个是false, isAll就是false
    isAll: {
      set(val) {
        this.cartList.forEach((item) => (item.flag = val))
        doSelectAll({ userid: localStorage.getItem("userid"), type: val }).then(res => {
          console.log(res);
        })
      },
      get() {
        return this.cartList.every(item => item.flag == true)
      }
    }
  },
  created() {
    // 判断用户是否登录
    if (localStorage.getItem("token")) {
      // 
      this.getCartList()
    } else {
      // 去登录页
      this.$router.push("/login")
    }

  },
  methods: {
    updateNum(cartid, num) {
      // 调用 增加数量的接口
      doUpdateNum({ cartid, num }).then(res => {
        console.log(res);
      });
    },
    getCartList() {
      // 发送获取购物车的请求
      doCartList({ userid: localStorage.getItem("userid") }).then(res => {
        // console.log(res.data.code);
        if (res.data.code == "10020") {
          this.empty = true
        } else {  // 有数据
          this.empty = false
          this.cartList = res.data.data
        }
      });
    },
    beforeClose({ name, position, instance }) {
      switch (position) {
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？',
          }).then(() => {
            // 点击删除 调用更新购物车
            doDeleteOne({ cartid: name }).then(res => {
              // console.log(res);
              if (res.data.code == '200') {
                this.getCartList()
              }
            });
            instance.close();
          }).catch(() => {
            instance.close();
          });
          break;
      }
    },

    selectOne(cartid, flag) {
      doSelectOne({ cartid: cartid, flag: flag }).then((res) => {
        console.log(res);
      });
    },

    delsCard() {
      doRemoveAll({ userid: localStorage.getItem("userid") }).then(res => {
        // console.log(res.data.code);
        if (res.data.code == 200) {
          this.cartList = []
          this.empty = true
        }
      })
    },

    onSubmit() {
      doAddOrder({ userid: localStorage.getItem("userid") }).then(res => {
        // console.log(res);
        localStorage.setItem("time", res.data.time)
      })
      this.$router.push('/order')
    },

  },
}
</script>

<style scoped>
.delete-button {
  height: 100%;
}

::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: #fff;
}

::v-deep .van-checkbox {
  width: 0.3rem;
}

::v-deep .van-card {
  flex: 1;
  background-color: #fff;
}

.btn {
  width: 1rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  border-radius: 20px;
  color: #fff;
  background-color: orangered;
}
</style>